<template>
    <div class="message">
        <titleNames titleName="共享书屋概况" />
        <div class="message-content">
            <el-row :gutter="16">
                <el-col :span="6" v-for="(item, index) in 6" :key="index">
                    <div class="name" :class="{ 'marT': index > 3 }">用户总数</div>
                    <div class="num">999</div>
                    <div class="scale">
                        <span>环比增长</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import titleNames from '@/components/titleName.vue'
</script>
<style lang="scss" scoped>
.marT {
    margin-top: 42px;
}

.message {
    margin-top: 6px;

    .message-content {
        color: #fff;
        margin-top: 31px;

        .name {
            line-height: 23px;
            font-size: 17px;
            font-family: Source Han Sans, Source Han Sans;
        }

        .num {
            margin-top: 17px;
            font-size: 33px;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: #129BFF;
            line-height: 52px;
        }

        .scale {
            font-size: 13px;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: rgba($color: #fff, $alpha: 0.7);
            line-height: 18px;
        }
    }
}
</style>